<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="历史版本" prop="hisVersion">
          <el-select @change="changeHisVersion($event)" v-model="queryParams.hisVersion" placeholder="请选择历史版本号" clearable>
            <el-option
              v-for="dict in hisVersions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
              @keyup.enter.native="handleQuery"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指标名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入模块名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="版本号" prop="version">
          <el-select v-model="queryParams.version" placeholder="请选择版本号" clearable>
            <el-option
              v-for="dict in dict.type.report_version"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
              @keyup.enter.native="handleQuery"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态"  prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable>
            <el-option
              v-for="dict in dict.type.sys_common_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
              @keyup.enter.native="handleQuery"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                        v-hasPermi="['reportworld:dimZblx:add']"
                >新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="info"
                        plain
                        icon="el-icon-sort"
                        size="mini"
                        @click="toggleExpandAll"
                >展开/折叠</el-button>
            </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['reportworld:dimZblx:export']"
            >导出</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="info"
              plain
              icon="el-icon-upload"
              size="mini"
              @click="handleImport"
              v-hasPermi="['reportworld:dimZblx:import']"
            >导入</el-button>
          </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table  border="border"
                v-if="refreshTable"
                v-loading="loading"
                :data="dimZblxList"
                row-key="id"
                :default-expand-all="isExpandAll"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column
            v-hasPermi="['reportworld:dimZblx:query','reportworld:dimZblx:edit','reportworld:dimZblx:add']"
            label="操作" type="" align="center" width="250px" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleUpdate(scope.row,false)"
                v-hasPermi="['reportworld:dimZblx:query']"
              >详情</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['reportworld:dimZblx:edit']"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-plus"
                @click="handleAdd(scope.row)"
                v-hasPermi="['reportworld:dimZblx:add']"
              >新增</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['reportworld:dimZblx:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
           <el-table-column label="指标名称" align="center" prop="findxNm"  width="180px" :show-overflow-tooltip="true" />
            <el-table-column label="指标编码" align="center" prop="findxTpCode"  width="180px" :show-overflow-tooltip="true" >
              <template slot-scope="scope" >
                <a @click="handleDataDimZblx(scope.row.findxTpCode)" style="color:blue;cursor:pointer;font-size: 12px;"
                   v-if="scope.row.parentId != '0'">{{scope.row.findxTpCode}}</a>
                <span v-else>{{ scope.row.findxTpCode  }}</span>
              </template>
          </el-table-column>

            <el-table-column label="指标类型" align="center" prop="zblxType"  width="180px" :show-overflow-tooltip="true" >
              <template slot-scope="scope">
                <dict-tag :options="dict.type.zblx_type" :value="scope.row.zblxType"/>
              </template>
            </el-table-column>
          <el-table-column label="版本号" width="150" align="center" prop="version" sortable="custom" :sort-orders="['descending', 'ascending']">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.report_version" :value="scope.row.version" sortable="custom" :sort-orders="['descending', 'ascending']"/>
            </template>
          </el-table-column>
            <el-table-column label="顺序" align="center" prop="orderNum" />
          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" align="center" prop="createTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="添加人" width="150" align="center" prop="createBy" :show-overflow-tooltip="true" />
          <el-table-column label="编辑时间" align="center" prop="updateTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="编辑人" width="150" align="center" prop="updateBy" :show-overflow-tooltip="true" />
          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
        </el-table>

        <!-- 添加或修改指标类型对话框 -->
        <el-dialog  :title="title" :close-on-click-modal ="false" :visible.sync="open" width="1000px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="指标编码" prop="findxTpCode">
                  <el-input v-model="form.findxTpCode" placeholder="请输入指标编码"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="指标名称" prop="findxNm">
                  <el-input v-model="form.findxNm" placeholder="请输入指标名称"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="上级指标" prop="parentId">
                  <treeselect style="width: 300px;" v-model="form.parentId" :options="dimZblxOptions" :normalizer="normalizer"
                              placeholder="请选择指标上级编码"/>
                </el-form-item>
              </el-col>
              <el-col :span="12"  >
                <el-form-item  label="指标类型" prop="zblxType">
                  <el-select style="width: 300px;"  filterable clearable :disabled="form.parentId != 0" v-model="form.zblxType" placeholder="请选择版指标类型" >
                    <el-option
                      v-for="dict in dict.type.zblx_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="版本号" prop="version">
                  <el-select :disabled="true" clearable v-model="form.version" placeholder="请选择版本号">
                    <el-option
                      v-for="dict in dict.type.report_version"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="顺序" prop="orderNum">
                  <el-input-number style="width: 100%" v-model="form.orderNum" controls-position="right" :min="0"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态" prop="status">
                  <el-radio-group v-model="form.status">
                    <el-radio
                      v-for="dict in dict.type.sys_common_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input maxlength="500" v-model="form.remark" type="textarea" placeholder="请输入内容"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="isUpdate" type="primary" :loading="butloading" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>


      <!-- 导入对话框 -->
      <el-dialog  :title="upload.title" :close-on-click-modal ="false" :visible.sync="upload.open" width="400px" append-to-body>
        <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url + '?updateSupport=' + upload.updateSupport+'&hisVersion='+ this.queryParams.hisVersion"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip text-center" slot="tip">
            <div class="el-upload__tip" slot="tip">
              <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的数据
            </div>
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
          </div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import { listDimZblx, getDimZblx, delDimZblx, addDimZblx, updateDimZblx ,init} from "@/api/reportworld/dimZblx";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getToken } from "@/utils/auth";

    export default {
        name: "DimZblx",
            dicts: ['sys_common_status','zblx_type','report_version','sys_yes_no'],
        components: {
            Treeselect
        },
      data() {
        return {
          butloading: false,
          isUpdate: false,
          // 遮罩层
          loading: true,
          // 显示搜索条件
          showSearch: true,
          // 指标类型表格数据
          dimZblxList: [],
          // 指标类型树选项
          dimZblxOptions: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 是否展开，默认全部展开
          isExpandAll: false,
          // 重新渲染表格状态
          refreshTable: true,
          hisVersions:[],
          // 查询参数
          queryParams: {
            findxTpCode: null,
            findxNm: null,
            status: null,
            hisVersion:null,
          },
          // 导入参数
          upload: {
            // 是否显示弹出层
            open: false,
            // 弹出层标题
            title: "",
            // 是否禁用上传
            isUploading: false,
            // 是否更新已经存在的用户数据
            updateSupport: 0,
            // 设置上传的请求头部
            headers: { Authorization: "Bearer " + getToken() },
            // 上传的地址
            url: process.env.VUE_APP_BASE_API + "/reportworld/dimZblx/readDimZblxInfo"
          },
          // 表单参数
          form: {},
          queryParams2: {},
          // 表单校验
          rules: {
            parentId: [
              {required: true, message: "上级指标不能为空", trigger: "change"}
            ],
            findxTpCode: [
              {required: true, message: "指标编码不能为空", trigger: "change"}
            ],
            findxNm: [
              {required: true, message: "指标名称不能为空", trigger: "change"}
            ],
            zblxType: [
              {required: true, message: "指标类型不能为空", trigger: "change"}
            ],
            orderNum: [
              {required: true, message: "顺序不能为空", trigger: "change"}
            ]
          }
        };
      },
      created() {
        this.init();
        this.getList();
      },
        methods: {
          changeHisVersion(value){
            this.queryParams.hisVersion=value;
            this.init();
            this.getList();
          },
          init(){
            init(this.queryParams).then(response => {
              this.hisVersions=response.hisVersions;
          });
          },
            /** 查询指标类型列表 */
            getList() {
                this.loading = true;
                listDimZblx(this.queryParams).then(response => {
                    this.dimZblxList = this.handleTree(response.data, "id", "parentId");
                this.loading = false;
            });
            },
            /** 转换指标类型数据结构 */
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.findxNm,
                    children: node.children
                };
            },
            /** 查询指标类型下拉树结构 */
            getTreeselect() {
                listDimZblx().then(response => {
                    this.dimZblxOptions = [];
                const data = { id: 0, findxNm: '顶级节点', children: [] };
                data.children = this.handleTree(response.data, "id", "parentId");
                this.dimZblxOptions.push(data);
            });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                        id: null,
                        findxTpCode: null,
                        findxNm: null,
                        parentId: null,
                        orderNum: null,
                        status: null,
                        createTime: null,
                        createBy: null,
                        updateTime: null,
                        updateBy: null,
                        remark: null
            };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            /** 新增按钮操作 */
            handleAdd(row) {
                this.reset();
                this.getTreeselect();
                if (row != null && row.id) {
                    this.form.parentId = row.id;
                } else {
                    this.form.parentId = 0;
                }
                this.open = true;
                this.title = "添加指标类型";
                this.isUpdate =true;
                this.form.status = parseInt(this.dict.type.sys_common_status [0].value);
                this.form.version = this.dict.type.report_version[0].value;
                if(null != row.zblxType){
                  this.form.zblxType = row.zblxType;
                }
                if(this.queryParams.hisVersion){
                  this.form.version =this.queryParams.hisVersion;
                }
            },
            /** 展开/折叠操作 */
            toggleExpandAll() {
                this.refreshTable = false;
                this.isExpandAll = !this.isExpandAll;
                this.$nextTick(() => {
                    this.refreshTable = true;
            });
            },
            /** 修改按钮操作 */
            handleUpdate(row,isUpdate) {
                this.reset();
                this.getTreeselect();
                if (row != null) {
                    this.form.parentId = row.id;
                }
                getDimZblx(row.id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改指标类型";
                this.isUpdate =true;
                if(isUpdate == false){
                  this.title = "指标类型详情";
                  this.isUpdate =false;
                }
            });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                      this.butloading=true;
                      this.form.hisVersion =this.queryParams.hisVersion;
                        if (this.form.id != null) {
                            updateDimZblx(this.form).then(response => {
                             this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        }).finally(() => {this.butloading=false});
                        } else {
                            addDimZblx(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        }).finally(() => {this.butloading=false});
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
              const hisVersion=this.queryParams.hisVersion;
                this.$modal.confirm('是否确认删除数据项？').then(function() {
                    return delDimZblx(row.id,hisVersion);
                }).then(() => {
                    this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
            },
          /** 导入按钮操作 */
          handleImport() {
            this.upload.title = "指标导入";
            this.upload.open = true;
          },
          /** 下载模板操作 */
          importTemplate() {
            this.download('reportworld/dimZblx/importTemplate', {
            }, `dimZblx_template_${new Date().getTime()}.xlsx`)
          },
          // 文件上传中处理
          handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
          },
          // 文件上传成功处理
          handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
            this.getList();
          },
          // 提交上传文件
          submitFileForm() {
            this.$refs.upload.submit();
          },
          /** 导出按钮操作 */
          handleExport() {
            this.download('reportworld/dimZblx/export', {
              ...this.queryParams
          }, `指标_${new Date().getTime()}.xlsx`)
          },
           handleDataDimZblx(findxTpCode){
             this.$router.push({ name:'indexInfo',query: {findxTpCode:findxTpCode,hisVersion: this.queryParams.hisVersion} });
          }
        }
    };
</script>
